<template>
  <div>
    <a-menu
      theme="dark"
      mode="inline"
      :defaultSelectedKeys="defaultSelectedKeys"
      :defaultOpenKeys="defaultOpenKeys"
    >
      <template v-for="item in menuData">
        <template v-if="item.children">
          <a-sub-menu :key="item.path">
            <span slot="title"><a-icon :type="item.icon" /><span>{{item.name}}</span></span>
            <a-menu-item
              v-for="subItem in item.children"
              :key="subItem.path">
              <router-link :to="subItem.path">
                <a-icon :type="subItem.icon" />
                <span>{{subItem.name}}</span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
        </template>
        <template v-else>
          <a-menu-item
            :key="item.path">
            <router-link :to="item.path">
              <a-icon :type="item.icon" />
              <span>{{item.name}}</span>
            </router-link>
          </a-menu-item>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>
import getMenuData from '../common/menuData';

export default {
  name: 'Sidebar',
  data() {
    return {
      defaultSelectedKeys: [],
      defaultOpenKeys: [],
      menuData: [],
    };
  },
  created() {
    this.menuData = getMenuData();
    const { path } = this.$route;
    this.defaultSelectedKeys.push(path);
    if (path.split('/').length > 1) {
      this.defaultOpenKeys.push(`/${path.split('/')[1]}`);
    }
  },
  watch: {
    // $route(data) {
    //   const { path } = data;
    //   this.selectedKeys = [path];
    //   if (path.split('/').length > 1) {
    //     this.openKeys = [`/${path.split('/')[1]}`];
    //   }
    // },
  },
  methods: {
    // handleChange(openKeys) {
    //   this.openKeys = openKeys[openKeys.length - 1];
    // },
  },
};
</script>

<style scoped>

</style>
